<!--
 * @Description: 创建自定义应用
 * @Autor: lily
 * @Date: 2021-04-25 15:10:04
 * @LastEditors: lily
 * @LastEditTime: 2021-05-08 18:45:49
-->
<template>
  <base-modal
    title="新建应用"
    class="creat-custom-apply-dialog"
    :show.sync="visible"
    width="608px"
  >
    <div class="base-modal-content">
      <div class="creat-custom-list" @click="creatApply">
        <div class="creat-custom-list-bg"></div>
        <div class="creat-custom-list-icon"><i class="iconfont icon-add2"></i></div>
        <p class="creat-custom-list-title">创建空白应用</p>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" :disabled="pending">关闭</el-button>
      <el-button type="primary" @click="visible = false" :disabled="pending">保存</el-button>
    </div>
    <apply-inforn ref="applyInforn" @close="onClose"></apply-inforn>
  </base-modal>
</template>

<script>
import ApplyInforn from './ApplyInforn';

export default {
  name: 'creat-custom-apply',
  data() {
    return{
      visible: false,
      pending: false
            
    }
  },
  methods:{
    open() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    creatApply() {
      this.$refs.applyInforn.open()
    }
  },
  components:{
    [ApplyInforn.name]:ApplyInforn
  }
}
</script>
<style lang="scss" scoped>
.creat-custom-apply-dialog {
    .base-modal-content {
        margin: 41px 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .creat-custom-list {
            width: 160px;
            height: 180px;
            background: #FFFFFF;
            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            cursor: pointer;
            &-bg {
                width: 100%;
                height: 24px;
                background: #F5F5F9;
                border-radius: 4px 4px 0px 0px;
            }
            &-icon {
                text-align: center;
                .iconfont {
                    font-size: 85px;
                    color: #F5F5F9;
                }   
            }
            &-title {
                font-size: 16px;
                font-weight: 700;
                color: #262626;
                text-align: center;
            }
            &:hover {
                border: 2px solid $color-primary;
                .creat-custom-list-bg {
                    background: $color-primary-light-2;
                }
                .iconfont {
                    color:$color-primary-light-1;

                }
            }

        }
    }
}
</style>